<template>
	<view class="main" style="display: block;">
		<view class="content">
			<view class="box">
				<h1 style="color:#eeeeee;font-size: 32px;">Welcome!</h1>
				<div id="qrcodeCanvas"><canvas width="200" height="200"></canvas></div>
				<div>
					<p class="text" style="color:#eee">扫描二维码下载APP</p>
					<a href="#" onclick="tz()" class="button">点击下载APP</a>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello'
		};
	},
	onLoad() {},
	methods: {}
};
</script>

<style>
.main {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: url('~@/static/download.jpg')
		no-repeat;
	background-size: cover;
}
.content {
	line-height: 1.6;
	position: absolute;
	top: 47%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 380px;
	height: 540px;
	border-radius: 3px;
}
.box {
    position: relative;
    text-align: center;
}
.text {
    text-align: center;
    font-size: 20px;
    color: #353535;
    margin-bottom: 23px;
}
.button {
    display: block;
    text-decoration: none;
    line-height: 2.55555556;
    border-radius: 4px;
    color: #fff;
    border: 1px solid #886cff;
    background: #886cff;
    margin-top: 40px;
    width: 220px;
    margin: 30px auto 20px;
}
#qrcodeCanvas {
    padding: 20px;
    margin-left: 65px;
    width: 206px;
    background: #ffffff;
}
</style>
